<template>
  <div>
    <el-form
      ref="financeFormRecord"
      :model="sizeForm"
      label-width="100px"
      :rules="rules"
      class="finance main-content"
    >
      <el-form-item label="企业名称:" prop="company">
        <el-input v-model="sizeForm.company"></el-input>
      </el-form-item>
      <el-form-item label="合同编号:" prop="cid">
        <el-input v-model="sizeForm.cid"></el-input>
      </el-form-item>
      <!-- <el-form-item label="电子合同:" prop="electronic">
        <el-upload
          class="upload-demo"
          accept=".pdf,.doc,.zip"
          action="https://jsonplaceholder.typicode.com/posts/"
        >
          <el-button size="small" type="primary">选取文件</el-button>
          <div slot="tip" class="el-upload__tip">
            上传扫描附件 pdf或doc或zip格式
          </div>
        </el-upload>
      </el-form-item> -->
      <el-form-item label="开票信息" prop="vote">
        <el-select v-model="sizeForm.vote" placeholder="请选择发票类型">
          <el-option label="普票" value="pVote"></el-option>
          <el-option label="专票" value="sVote"></el-option>
          <el-option label="不开票" value="noVote"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="公司税号:" prop="tid">
        <el-input v-model="sizeForm.tid"></el-input>
      </el-form-item>
      <el-form-item label="开户地址:" prop="address">
        <el-input v-model="sizeForm.address"></el-input>
      </el-form-item>
      <el-form-item label="开户电话:" prop="phone">
        <el-input v-model="sizeForm.phone"></el-input>
      </el-form-item>
      <el-form-item label="开户银行:" prop="bank">
        <el-input v-model="sizeForm.bank"></el-input>
      </el-form-item>
      <el-form-item label="银行账号:" prop="account">
        <el-input v-model="sizeForm.account"></el-input>
      </el-form-item>
      <el-form-item label="开户名称:" prop="name">
        <el-input v-model="sizeForm.name"></el-input>
      </el-form-item>
      <el-form-item label="开户备注:" prop="mark">
        <el-input v-model="sizeForm.mark" type="textarea"></el-input>
      </el-form-item>
      <el-form-item label="收费明细:">
        <div class="finance-list-operate">
          <b>总计: {{ totalAmount }}</b>
          <div>
            <el-button
              class="finance-list-add"
              size="small"
              type="primary"
              @click="dialogFormVisible = true"
              >添加</el-button
            >
            <el-button
              class="finance-list-add"
              size="small"
              type="warning"
              @click="handleReset"
              >清空</el-button
            >
          </div>
        </div>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="higher" label="认证大分类" width="180">
            <template slot-scope="scope">{{
              highers[scope.row.higher]
            }}</template>
          </el-table-column>
          <el-table-column prop="lower" label="认证小分类" width="180">
            <template slot-scope="scope">{{
              lowers[scope.row.lower]
            }}</template>
          </el-table-column>
          <el-table-column prop="type" label="收费类型">
            <template slot-scope="scope">{{ types[scope.row.type] }}</template>
          </el-table-column>
          <el-table-column prop="amount" label="到款金额"> </el-table-column>
          <el-table-column prop="receivable" label="到款日期">
          </el-table-column>
          <el-table-column prop="finished" label="是否收完">
            <template slot-scope="scope">{{
              scope.row.finished ? "是" : "否"
            }}</template>
          </el-table-column>
          <el-table-column prop="invoice" label="已开票金额" />
          <el-table-column prop="time" label="开票时间" />
          <el-table-column prop="fid" label="发票号码" />
          <el-table-column prop="claimer" label="领取人" />
          <el-table-column prop="arrear" label="欠款金额" />
          <el-table-column prop="unvoice" label="未开票金额" />
          <el-table-column prop="mark" label="财务备注"/>
          <el-table-column label="操作">
            <template scope="scope">
              <el-button
                size="small"
                type="text"
                @click="handleEdit(scope.$index, scope.row)"
                >修改</el-button
              >
              <el-button
                size="small"
                type="text"
                @click="handleDelete(scope.$index)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item size="large">
        <el-button type="primary" @click="onSubmit">立即提交</el-button>
        <el-button type="primary" @click="handleSave">保存</el-button>
      </el-form-item>
    </el-form>
    <!--  编辑弹框 -->
    <el-dialog title="收费录入" :visible.sync="dialogFormVisible">
      <el-form :model="form" ref="dialogForm">
        <el-form-item
          label="认证大分类:"
          :label-width="formLabelWidth"
          prop="higher"
        >
          <el-select v-model="form.higher" placeholder="请选择认证大分类">
            <el-option label="产品认证" value="productWord"></el-option>
            <el-option label="体系服务" value="txWord"></el-option>
            <el-option label="有机GAP" value="gapWord"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="认证小分类:"
          :label-width="formLabelWidth"
          prop="lower"
        >
          <el-select v-model="form.lower" placeholder="请选择认证小分类">
            <el-option label="3C认证" value="3xWord"></el-option>
            <el-option label="自愿性认证" value="zyxWord"></el-option>
            <el-option label="QMS16GB" value="qmsWord"></el-option>
            <el-option label="食用菌" value="syjWord"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="收费类型:"
          :label-width="formLabelWidth"
          prop="type"
        >
          <el-select v-model="form.type" placeholder="请选择收费类型">
            <el-option label="初审" value="preliminary"></el-option>
            <el-option label="监1" value="jdWord"></el-option>
            <el-option label="监2" value="dbWord"></el-option>
            <el-option label="在认证" value="stWord"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="到款金额:"
          :label-width="formLabelWidth"
          prop="amount"
        >
          <el-input
            style="width: 195px"
            v-model="form.amount"
            placeholder="请输入到款金额"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="到款时间:"
          :label-width="formLabelWidth"
          prop="receivable"
        >
          <el-date-picker
            v-model="form.receivable"
            style="width: 195px"
            type="datetime"
            placeholder="选择到款时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="快递类别:" prop="type" :label-width="formLabelWidth">
          <el-radio-group v-model="form.finished" size="small">
            <el-radio border label="1">是</el-radio>
            <el-radio border label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="欠款金额:"
          :label-width="formLabelWidth"
          prop="arrear"
        >
          <el-input
            style="width: 195px"
            v-model="form.arrear"
            placeholder="请输入欠款金额"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="已开票金额:"
          :label-width="formLabelWidth"
          prop="invoice"
        >
          <el-input
            style="width: 195px"
            v-model="form.invoice"
            placeholder="请输入已开票金额"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="发票号码:"
          :label-width="formLabelWidth"
          prop="fid"
        >
          <el-input
            style="width: 195px"
            v-model="form.fid"
            placeholder="请输入发票号码"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="开票时间:"
          :label-width="formLabelWidth"
          prop="time"
        >
          <el-date-picker
            v-model="form.time"
            style="width: 195px"
            type="datetime"
            placeholder="选择开票时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          label="领取人:"
          :label-width="formLabelWidth"
          prop="claimer"
        >
          <el-input
            style="width: 195px"
            v-model="form.claimer"
            placeholder="请输入领取人"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="未开票金额:"
          :label-width="formLabelWidth"
          prop="unvoice"
        >
          <el-input
            style="width: 195px"
            v-model="form.unvoice"
            placeholder="请输入未开票金额"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="合同备注:"
          :label-width="formLabelWidth"
          prop="mark"
        >
          <el-input
            type="textarea"
            v-model="form.mark"
            placeholder="请输入合同备注"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="handleOperate">{{
            currentIndex === -1 ? "新增" : "更新"
          }}</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import moment from "moment";
import { highers, lowers, types } from "../../utils/utils";
import { addFinance } from "../../api/finance";
export default {
  data() {
    return {
      sizeForm: {
        company: "",
        cid: "",
      },
      tableData: [],
      dialogFormVisible: false,
      form: {
        higher: "",
        lower: "",
        type: "",
        time: "",
        mark: "",
        unvoice: "",
        receivable: "",
        claimer: "",
        fid: "",
        invoice: "",
        arrear: "",
        finished: "",
        amount: "",
      },
      formLabelWidth: "100px",
      currentIndex: -1,
      highers,
      lowers,
      types,
      totalAmount: 0,
      rules: {
        company: [
          { required: true, message: "请输入企业名称", trigger: "blur" },
        ],
        cid: [{ required: true, message: "请输入合同编号", trigger: "blur" }],
        name: [{ required: true, message: "请输入开户名称", trigger: "blur" }],
        account: [{ required: true, message: "请输入银行账户", trigger: "blur" }],
        bank: [{ required: true, message: "请输入开户银行", trigger: "blur" }],
        phone: [{ required: true, message: "请输入开户电话", trigger: "blur" }],
        address: [{ required: true, message: "请输入开户地址", trigger: "blur" }],
        tid:  [{ required: true, message: "请输入公司税号", trigger: "blur" }],
        vote: [{ required: true, message: "请输入公司税号", trigger: "change" }],
      },
    };
  },
  created() {
    const tableDataSaved = localStorage.getItem("financeTable");
    this.tableData = tableDataSaved ? JSON.parse(tableDataSaved) : [];
    console.log(this.tableData);
    this.handleTotal();
  },
  methods: {
    handleOperate() {
      if (this.currentIndex === -1) {
        const info = {
          ...this.form,
          time: moment(this.form.time).format("YYYY-MM-DD HH:mm:ss"),
          receivable: moment(this.form.receivable).format("YYYY-MM-DD HH:mm:ss"),
        };
        this.tableData.push(info);
      } else {
        this.tableData[this.currentIndex] = this.form;
      }
      this.dialogFormVisible = false;
      this.currentIndex = -1;
      this.handleTotal();
    },
    handleEdit(index, row) {
      this.dialogFormVisible = true;
      this.form = row;
      this.currentIndex = index;
    },
    handleSave() {
      localStorage.setItem("financeTable", JSON.stringify(this.tableData));
      this.$message({
        type: "success",
        message: "保存成功",
      });
    },
    handleDelete(index) {
      this.tableData.splice(index, 1);
      this.handleTotal();
    },
    handleTotal() {
      const amounts = this.tableData?.map((x) => Number(x.amount));
      this.totalAmount = amounts?.reduce((accumulator, currentValue) => {
        return accumulator + currentValue;
      }, 0);
    },
    handleReset() {
      localStorage.removeItem("financeTable");
      this.tableData = [];
      this.totalAmount = 0;
    },
    async handleSubmit() {
      const { company, cid } = this.sizeForm;
      const params = this.tableData?.map((x) => {
        return {
          ...x,
          company,
          cid,
        };
      });
      const res = await addFinance(params);
      const { code, message } = res?.data;
      if (code === 0) {
        this.$message({
          message,
          type: "success",
        });
        this.$refs["financeFormRecord"].resetFields();
      }
    },
    onSubmit() {
      this.$refs["financeFormRecord"].validate((valid) => {
        if (valid) {
          this.handleSubmit();
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.finance {
  height: 100vh;

  /deep/ .el-input,
  /deep/ .el-textarea {
    width: 600px;
  }
  .finance-list-operate {
    display: flex;
    margin-bottom: 5px;
    align-items: center;
    justify-content: space-between;
  }
}
</style>